<template>
    <el-dialog :title="'新建'+ folderTitle" :visible.sync="folderVisible" width="360px">
        <div class="rename-content">
            <span class="rename-title">{{folderTitle}}名称</span>
            <el-input class="rename-input" v-model="folderForm.name"></el-input>
        </div>
        <div class="superior-content" v-if="treeData">
            <span class="rename-title">所属文件夹</span>
            <div class="superior-content-item">
                <img class="svg-icon" :src="src">
                <span class="superior-content-title" v-if="treeData">{{treeData.label}}</span>
            </div>
        </div>
        <div class="superior-content" v-else>
            <span class="rename-title">文件类型</span>
            <div class="superior-content-item">
                <el-select v-model="folderValue" placeholder="请选择文件类型" style="width: 100%;">
                    <el-option v-for="item in folderType" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="folderVisible = false">取 消</el-button>
            <el-button type="primary" @click="createdClick">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { save } from "@/api/dir.js";
export default {
    data() {
        return {
            src:require("../../../../img/8eacfb1a6bafde0a172c6b393950dab8.svg"),
            folderVisible: false,
            folderTitle: "",
            folderForm: {
                name: "",
                dirLevelCode: "",
                dirLevel: "",
                parentDirId: "",
            },
            folderType: [
                {
                    value: "00",
                    label: "项目",
                },
                {
                    value: "01",
                    label: "任务",
                },
                {
                    value: "02",
                    label: "产品",
                },
                {
                    value: "04",
                    label: "文档",
                },
                {
                    value: "05",
                    label: "合同",
                },
            ],
            folderValue: "00",
        };
    },
    props: {
        treeData: {
            type: Object,
            default: null,
        },
    },
    created() {
        console.log(this.treeData);
    },
    methods: {
        // 保存文件夹/文档
        createdClick() {
            var _this = this;
            console.log(_this.treeData);
            if (_this.treeData) {
                if (_this.treeData.data.dirLevel > 0) {
                    _this.folderForm.dirType = _this.treeData.data.dirType;
                    _this.folderForm.parentDirId = _this.treeData.data.dirId;
                    if (!this.folderForm.name) {
                        this.$message.error("请输入文件名称");
                        return;
                    }
                    save(_this.folderForm).then((res) => {
                        console.log(res);
                        this.folderVisible = false;
                        this.updateTree(res.data);
                        _this.$message({
                            showClose: true,
                            message: "操作成功",
                            type: "success",
                        });
                    });
                } else {
                    var data = {
                        name: "",
                        dirLevelCode: "",
                        dirLevel: "",
                        parentDirId: "",
                    };
                    data.name = _this.folderForm.name;
                    data.dirType = _this.treeData.data.dirType;
                    if (!this.folderForm.name) {
                        this.$message.error("请输入文件名称");
                        return;
                    }
                    save(data).then((res) => {
                        console.log(res);
                        this.folderVisible = false;
                        this.updateTree(res.data);
                        _this.$message({
                            showClose: true,
                            message: "操作成功",
                            type: "success",
                        });
                    });
                }
            } else {
                var data = {
                    name: "",
                    dirLevelCode: "",
                    dirLevel: "",
                    parentDirId: "",
                };
                data.name = _this.folderForm.name;
                data.dirType = _this.folderValue;
                if (!this.folderForm.name) {
                    this.$message.error("请输入文件名称");
                    return;
                }
                save(data).then((res) => {
                    console.log(res);
                    this.folderVisible = false;
                    this.updateTree(res.data);
                    _this.$message({
                        showClose: true,
                        message: "操作成功",
                        type: "success",
                    });
                });
            }
        },
        // 更新树
        updateTree(data) {
            this.$emit("updateTree", data);
        },
        loadFolder(data) {
            this.folderTitle = data;
            this.folderVisible = true;
        },
    },
};
</script>

<style scoped>
.rename-content {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    padding-bottom: 10px;
}

.rename-input {
    flex: 1;
}

.rename-title {
    font-size: 14px;
    font-weight: 700;
    color: #2e405e;
    margin-bottom: 10px;
    display: block;
}

.superior-content {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.superior-content-item {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.superior-content-title {
    font-size: 12px;
    color: #2e405e;
}

.svg-icon {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    flex-shrink: 0;
}

/deep/.el-dialog .el-dialog__footer {
    border-color: white;
}

/deep/.el-dialog__title {
    font-weight: bold;
    font-size: 16px;
}
</style>
